<template>
  <div class="detailContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card style="margin-top: 20px">
          <template #header>
            <span style="font-size: 16px">工序流程</span>
          </template>
          <div class="basicBody">
            <div class="basicInfoContainer">
              <div class="milestone">
                <div class="milestone-content">工序流程</div>
              </div>
              <el-steps
                style="width: 100%; margin-top: 40px"
                :active="activeTask"
                finish-status="success"
                simple
              >
                <el-step title="工序一" />
                <el-step title="工序二" />
                <el-step title="工序三" />
                <el-step title="工序四" />
              </el-steps>
              <div
                class="buttonGroup"
                style="margin-top: 20px; display: flex; justify-content: center"
              >
                <el-button
                  plain
                  type="primary"
                  @click="returnTask"
                  :disabled="activeTask == 0"
                  >撤回至上一步</el-button
                >
                <el-button
                  type="primary"
                  @click="confirmTask"
                  :disabled="activeTask == 4"
                  >完成当前工序</el-button
                >
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
      </div>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { putProduceWorkOrderUpdateApi } from "@/api/Produce";

const $router = useRouter();
const $route = useRoute();
let activeTask = ref(Number($route.query.progress) / 25);
const isFooterVisible = ref(false);
const close = () => {
  $router.replace("/production/order");
};
const confirmTask = async () => {
  if (activeTask.value < 4) {
    activeTask.value += 1;
    const res = await putProduceWorkOrderUpdateApi({
      objectId: $route.query.objectId as string,
      status:
        activeTask.value == 4 ? "已完成" : ($route.query.status as string),
      progress: String(activeTask.value * 25),
    });
    ElMessage({ type: "success", message: "已完成当前工序" });
  } else {
    ElMessage({ type: "error", message: "已完成至最后一步" });
  }
};
const returnTask = async () => {
  if (activeTask.value >= 1) {
    activeTask.value -= 1;
    const res = await putProduceWorkOrderUpdateApi({
      objectId: $route.query.objectId as string,
      status:
        activeTask.value == 4 ? "已完成" : ($route.query.status as string),
      progress: String(activeTask.value * 25),
    });
    ElMessage({ type: "success", message: "退回成功" });
  } else {
    ElMessage({ type: "error", message: "已退回到第一步" });
  }
};
onMounted(() => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
});
</script>
  
  <style scoped lang="scss">
.detailContainer {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  .title {
    .name {
      font-weight: bold;
      font-size: 18px;
    }
    .id {
      color: #969696;
      font-size: 13px;
      margin-left: 10px;
    }
  }
  .detailInfo {
    margin-top: 10px;
    display: flex;
  }
  .updateInfo {
    margin-left: 40px;
  }
  .basicBody {
    width: 100%;
    .basicInfoContainer,
    .warehouseContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .warehouseContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>